<template>
  <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      class="order-settlement"
      title="创建订单"
      width="1100"
  >
    <el-card style="margin-bottom: 10px">
      <div class="info-item">
        <el-icon>
          <Wallet/>
        </el-icon>
        <span>支付方式：微信支付</span>
      </div>
      <div class="info-item">
        <el-icon>
          <Calendar/>
        </el-icon>
        <span>下单时间：{{ now }}</span>
      </div>
      <div class="info-item">
        <el-icon>
          <List/>
        </el-icon>
        <span>订单备注: </span>
        <el-input v-model="orderData.remark" placeholder="输入订单备注" style="width: 500px;margin-left: 10px;"></el-input>
      </div>
    </el-card>

    <el-row :gutter="20">
      <!-- 左侧：地址选择 -->
      <el-col :span="8">
        <el-card class="address-selection-card">
          <template #header>
            <div class="card-header">
              <el-icon style="margin-right: 8px;">
                <Location/>
              </el-icon>
              <span>选择发货地址</span>
            </div>
          </template>
          <div v-if="userAddresses.length > 0" class="address-list-container">
            <el-card
                v-for="address in userAddresses"
                :key="address.id"
                :class="['address-card-item', { 'is-selected': orderData.addressId === address.id }]"
                shadow="hover"
                @click="handleSelectAddress(address.id)"
            >
              <div class="address-header">
                <span class="recipient-name">
                  {{ address.recipient }}
                </span>
                <span class="phone-number">{{ address.phone }}</span>
                <el-tag v-if="address.isDefault === 1" type="success" size="small" class="default-tag">默认</el-tag>
              </div>
              <p class="address-detail">{{ address.address }}</p>
            </el-card>
          </div>
          <el-empty v-else description="暂无收货地址" :image-size="100"/>
        </el-card>
      </el-col>

      <!-- 右侧：订单信息与明细 -->
      <el-col :span="16">
        <el-card class="address-selection-card">
          <template #header>
            <div class="card-header">
              <span>订单明细</span>
            </div>
          </template>
          <el-row :gutter="10">
            <el-col v-for="item in orderData.items" :key="item.id" :span="24">
              <el-card class="item-card">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <el-image
                        :src="item.image?.url"
                        class="product-image"
                        fit="cover"
                    />
                  </el-col>
                  <el-col :span="18">
                    <div class="item-info">
                      <div class="item-name">{{ item.name }}</div>
                      <div class="item-price">单价：￥{{ item.price }}</div>
                      <div class="item-count">数量：x{{ item.count }}</div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-button type="primary" style="width: 100%;margin-top: 10px" @click="handleCreateOrder">立即下单</el-button>
    </el-row>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {Calendar, Location, Wallet} from '@element-plus/icons-vue';
import request from '@/utils/request';
import {ElMessage} from "element-plus";
import { List } from '@element-plus/icons-vue';

const now = ref(new Date())
const orderData = reactive({
  items: [],
  addressId: null,
  businessType: 1,
  remark: '',
});

const dialogVisible = ref(false);
const userAddresses = ref([]);

const handleGetAddresses = async () => {
  userAddresses.value = await request.get('/userAddress/list');
  if (userAddresses.value.length > 0) {
    const defaultAddress = userAddresses.value.find(addr => addr.isDefault === 1);
    orderData.addressId = defaultAddress ? defaultAddress.id : userAddresses.value[0].id;
  }
};

const handleSelectAddress = (addressId) => {
  orderData.addressId = addressId;
};

const handleCreateOrder = async () => {
  if (!orderData.addressId) {
    ElMessage.warning('请选择一个发货地址')
    return
  }
  await request.post('/order/create', orderData)
  ElMessage.success('下单成功')
  emit('success')
  dialogVisible.value = false
}

const emit = defineEmits(['success'])

defineExpose({
  open: async (items, businessType) => {
    await handleGetAddresses();
    orderData.items = items;
    orderData.businessType = businessType
    dialogVisible.value = true;
  },
});
</script>

<style scoped>
.order-settlement {
  padding: 20px;
}

.card-header {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.info-item .el-icon {
  margin-right: 5px;
  color: #409EFF;
}

.order-items .item-card {
  margin-bottom: 10px;
  border-radius: 8px;
}

.item-card .product-image {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
}

.item-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  padding: 5px 0;
}

.item-name {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-price,
.item-count {
  font-size: 12px;
  color: #666;
}

.address-selection-card {
  height: 400px;
  overflow-y: scroll;
  border-radius: 12px;
}

.address-list-container {
  max-height: 450px;
  overflow-y: auto;
  padding-right: 10px;
}

.address-card-item {
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.address-card-item:hover {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
}

.address-card-item.is-selected {
  border-color: #409eff;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
  background-color: #ecf5ff;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.recipient-name {
  font-weight: bold;
  font-size: 15px;
  margin-right: 10px;
  color: #303133;
}

.phone-number {
  font-size: 14px;
  color: #606266;
  margin-right: auto;
}

.default-tag {
  margin-left: 8px;
}

.address-detail {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}
</style>
